<template>
  <div class="film">
    <!-- 背景图 -->
    <div
      class="bg"
      :style="{
        background: `url(${filmData.cover}) center center / cover no-repeat`,
      }"
    ></div>

    <!-- 详细信息 -->
    <div class="film-info">
      <div
        class="film-left"
        :style="{
          background: `url(${filmData.cover}) center center / cover no-repeat`,
        }"
      ></div>
      <div class="film-right">
        <p class="film-name">{{ filmData.title }}</p>
        <p class="film-over">{{ filmData.category }}</p>
        <p class="film-over">{{ areaAndDuration }}</p>
        <p>
          <span class="q-color">上映:</span>
          {{ filmData.onlineDay }}
        </p>
        <p>
          <span class="q-color">票房:</span>
          {{ filmData.boxOffice }}
        </p>
      </div>
    </div>

    <div class="film-box">
      <button v-app-jump="{ to: `mtjimu://film?id=${filmId}` }">认领作品职务</button>

      <div class="worker-list" v-if="filmTeams.length">
        <div class="film-item" v-for="item in filmTeams" :key="item.team">
          <div class="cateory" v-if="item.team">{{ item.team }} {{ item.users.length }}</div>
          <div class="people" v-for="(i, inde) in item.users" :key="inde">
            <div class="people-avatar">
              <img :src="i.avatar ? i.avatar : defaultAvator" alt="" />
              <img
                class="add-v"
                v-if="i.identified === 1"
                src="../../assets/images/icon-auth.png"
                alt=""
              />
              <img
                class="add-v"
                v-if="i.identified === 2"
                src="../../assets/images/icon-auth2.png"
                alt=""
              />
            </div>
            <div class="people-info">
              <!-- 有uid就是已经认领的 -->
              <!-- 已认领的账号显示账号头像和昵称 -->
              <!-- 未认领的账号显示默认头像和数据库中的数据（真实姓名） -->
              <p class="name">{{ i.uid ? i.nickname : i.username }}</p>
              <!-- 非演员职务，此处显示用户该影片下认领的所有职务称号，只显示一行，显示不下时省略… -->
              <!-- 演员，此处显示饰演的角色 -->
              <!-- 无任何信息时，名字居中显示 -->
              <p
                class="people-cateory"
                v-if="
                  ((i.team === '演员组' || i.team === '演员') && i.role) ||
                    (i.team !== '演员组' && i.team !== '演员' && i.job)
                "
              >
                {{ i.team === '演员组' || i.team === '演员' ? '饰：' + i.role : i.job }}
              </p>
            </div>
            <div class="attention" v-if="i.uid" v-app-jump="{ to: `mtjimu://film?id=${filmId}` }">
              关注
            </div>
            <div class="invite" v-else @click="invite">邀请认领</div>
          </div>
        </div>
      </div>

      <div v-else class="worker-is-kong">
        <span>还没有人认领该作品</span>
      </div>
    </div>

    <!-- 底部 -->
    <div class="kong"></div>
    <BottomOpenAppAdv v-app-jump="{ to: `mtjimu://film?id=${filmId}` }"></BottomOpenAppAdv>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '@/components/BottomOpenAppAdv';
  import { Button, Icon, Toast, Tab, Tabs } from 'vant';
  import qs from 'qs';
  export default {
    components: {
      // 'van-button': Button,
      // 'van-tabs': Tabs,
      BottomOpenAppAdv,
    },
    computed: {
      filmId() {
        const { id } = qs.parse(window.location.search.replace(/^\?/, ''));
        return id;
      },
      areaAndDuration() {
        // 全部有的时候返回一起的，否则哪个有显示哪个
        if (this.filmData.area && this.filmData.duration) {
          return [filmData.area, filmData.duration].join(' / ');
        } else {
          return this.filmData.area || this.filmData.duration;
        }
      },
    },
    data() {
      return {
        filmData: {}, //详情信息
        filmTeams: [], //全部人员
        defaultAvator: 'https://ketang-pub.movtile.com/res/default-avatar.jpg', //默认图像
      };
    },
    mounted() {
      if (!this.filmId) {
        Toast('缺少id');
        return;
      } else {
        // 得到数据
        this.getFilmData();
        this.getFilmTeams();
      }
    },
    methods: {
      // 职务分类
      getFilmTeams() {
        //   this.$service.UserFilmTeams({ filmId: this.filmId }).then((res) => {
        //     // 切掉第一个
        //     this.filmTeams = res.slice(1);
        //     this.filmTeams.forEach((item, index) => {
        //       this.$service
        //         .UserFilmStaffs({ filmId: this.filmId, team: item.team, page: 1, size: 100 })
        //         .then((r) => {
        //           this.$set(item, 'staffs', r.rows[0].users);
        //         });
        //     });
        //   });
        this.$service
          .UserFilmStaffs({ filmId: this.filmId, team: '', page: 1, size: 100 })
          .then((r) => {
            this.filmTeams = r.rows;
          });
      },

      // 详情
      getFilmData() {
        this.$service.UserFilmDetail({ filmId: this.filmId }).then((res) => {
          this.filmData = res;
          // 设置微信分享
          wx.ready(() => {
            this.$setShareInfo({ ...this.filmData.shareInfo });
          });
        });
      },
      // 点击分享的时候
      invite() {
        Toast('请点击右上角分享给TA');
      },
    },
  };
</script>
<style lang="less" scoped>
  .film {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    width: 100%;
    .bg {
      width: 100%;
      height: 20.7rem;
    }
    .film-info {
      background-color: #fff;
      margin-top: -1rem;
      border-radius: 10px 10px 0px 0px;
      padding: 1.8rem 2rem;
      display: flex;
      .film-left {
        height: 18.7rem;
        width: 12.7rem;
        margin-top: -10rem;
        border-radius: 5px;
      }
      .film-right {
        width: calc(100% - 14.6rem);
        margin-left: 1.7rem;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #111111;
        line-height: 24px;
        .film-name {
          font-size: 20px;
          font-weight: 800;
          color: #ffffff;
          line-height: 19px;
          margin-top: -5rem;
          margin-bottom: 2.4rem;
        }
        .film-over {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .q-color {
          color: #888;
        }
      }
    }
    .film-box {
      padding: 0.2rem 2rem;
      button {
        width: 100%;
        height: 47px;
        background: #2247ff;
        border-radius: 5px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #ffffff;
        margin: 0rem;
      }
      .worker-list {
        margin-top: 2.3rem;
        .film-item {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 2.4rem;
          .cateory {
            margin-bottom: 1.7rem;
          }
          .people {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1.7rem;
            .people-avatar {
              position: relative;
              width: 5rem;
              height: 5rem;
              img {
                width: 100%;
                width: 100%;
                z-index: 1;
                border-radius: 50%;
              }
              .add-v {
                position: absolute;
                right: -1px;
                bottom: 3px;
                width: 13px;
                height: 14px;
                background: #ffb400;
                border: 1px solid #ffffff;
                z-index: 10;
                border-radius: 50%;
              }
            }
            .people-info {
              flex: 1;
              margin-left: 1.2rem;

              .name {
                font-size: 1.7rem;
                font-weight: 800;
                color: #111111;
              }
              .people-cateory {
                margin-top: 0.5rem;
                max-width: 200px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .attention {
              width: 60px;
              height: 30px;
              line-height: 30px;
              border: 1px solid #111111;
              border-radius: 3px;
              color: #111;
              text-align: center;
              font-weight: 500;
            }
            .invite {
              font-size: 14px;
              font-weight: 500;
              color: #826245;
              width: 73px;
              height: 30px;
              line-height: 30px;
              background: #f8f1e4;
              border: 1px solid #826245;
              border-radius: 3px;
              text-align: center;
            }
          }
        }
      }
      .worker-is-kong {
        margin-left: 50%;
        margin-top: 39%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
      }
    }
    .kong {
      width: 100%;
      height: 70px;
    }
  }
</style>
